<template>
  <basic-container v-loading="loading">

    <el-tabs tab-position="left" v-if="groupModels&&groupModels.length>0">
      <el-tab-pane :label="group.actCategoryName" v-for="(group) in groupModels">
        <div class="startActList" v-if="group.models&&group.models.length>0">
          <div class="act-icon-item" v-for="(model) in group.models" @click="startApply(model)">
            <el-image style="" :src="getModeIconUrl(model)" fit="fill"/>
            <p style="margin: 0;cursor: Default">{{ model.modelName }}</p>
          </div>

        </div>
        <div v-else>
          <el-empty style="margin: auto;text-align: center"
                    description="暂无可用流程">
          </el-empty>
        </div>
      </el-tab-pane>

    </el-tabs>
    <div v-else>
      <el-empty style="margin: auto;text-align: center"

                description="暂无可用流程">
      </el-empty>
    </div>

    <start-act-dialog ref="startActDialog"></start-act-dialog>
  </basic-container>
</template>

<script>


import StartActDialog from "../components/startActDialog.vue";
import startActModelApi from "@/api/start/activiti/core/startActModelApi";

export default {
  name: "IWantToApply",
  components: {StartActDialog},
  data() {
    return {
      loading: true,
      openItem: [],
      groupModels: []
    }
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      startActModelApi.getListActModel().then(res => {
        console.log("groupModels", res.data.data)
        this.groupModels = res.data.data;
        this.loading = false
      })
    },
    getModeIconUrl(model) {
      if (!model.modelIcon || model.modelIcon.length < 1) {
        return "/img/start/act/start-act-def-icon.png"
      }
      return model.modelIcon[0];
    },
    startApply(model) {
      let query = {}
      query.modelKey = model.modelKey;
      query.name = "启动新流程【" + model.modelName + "】";
      this.$router.push({path: "/userProc/start", query})
    }
  }
}
</script>

<style scoped lang="scss">
@use "startActList";
</style>
